<style type="text/css">
    .followupGrid_parent {

    }

    .followupGrid_container {
        width: 100%;
        height: 100%;
        /*border: solid 1px #000000;*/
    }

    .jqgrow {
        height: 25px;
        max-height: 200px !important;
    }

</style>

<script type="text/javascript">

    jQuery(function ($) {
        var gridId = 'followupGrid';
        var url = 'my-followups';

        var colModel = [
            {
                name: 'reqNo',
                index: 'id',
                align: 'left',
                search: false,
                stype: 'text',
                formatter: function (cellvalue, options, rowObject) {
                    return "<A id='action_" + options.rowId + "' style='color:blue' title='Open' href='javascript:void(0)'>" + cellvalue + "</A>";
                },
                unformat: function (cellvalue, options, rowObject) {
                    return cellvalue;
                }
            },
            {
                name: 'category.name',
                index: 'category.name',
                align: 'left',
                search: true,
//                sortable: false,
                stype: 'select'
            },
            {
                name: 'type.name',
                index: 'type.name',
                align: 'left',
                search: true,
//                sortable: false,
                stype: 'select'
            }
            ,
            {
                name: 'description',
                index: 'description',
                align: 'left',
                width: 500,
                search: false
            },
            {
                name: 'reportBy.cil',
                index: 'reportBy.cil',
                align: 'left',
                search: true,
                stype: 'select'
            },
            {
                name: 'targetDate',
                index: 'targetDate',
                align: 'left',
                formatter: 'date', formatoptions: {srcformat: 'ISO8601Short', newformat: 'ISO8601Short'},
                search: false
            },
            {
                name: 'status',
                index: 'status',
                align: 'left',
//                formatter: 'select', editoptions: {value: "0:New; 1:In progress; 2:Closed"},

                search: true,
                stype: 'select'
            }
        ];
//        console.log("update search filter tool bar for grid myfollowups.");
        updateSearchOptionsValue(url, colModel);

        var grid = $('#' + gridId).jqGrid({
            url: url,
            postData: {
                prop: 'reqNo, category.name, type.name, description, reportBy.cil, targetDate, status',
                format: 'grid'
            },
            width: 1000,
//            autowidth: true,
            height: 380,
            datatype: 'json',
            mtype: 'post',
            pager: '#' + gridId + 'Pager',
            rowNum: 20,
            rowList: [20, 50, 100],
            multiSort: true,
            sortname: 'status asc, category.name asc, type.name asc, targetDate',
            sortorder: 'desc',
            sortable: true,
            loadtext: 'Loading, please wait...',
            caption: 'Follow-up',
            cellurl: '',

            colNames: ['Req#', 'Category', 'Type', 'Description', 'Reporter', 'Target date', 'Status'],
            colModel: colModel,
            gridComplete: function () {
                var grid = $(this);

                //action
                $("a[id^='action_']", this).on('click', function () {
                    var _ref = this.id.split('_'), action = _ref[0], rowid = _ref[1];
                    if (global.isTabOpened('tab_' + rowid)) {
                        return;
                    }
                    global.viewRequestInTab(rowid, global.VIEW_MODE.FOLLOWUP);
                    return;
                });
                //process description right height
                var lineLimit = 8;
                $("td[role='gridcell']", grid).each(function (index, element) {
                    var lines = $(element).html().split('\n');
                    if (lines.length > lineLimit) {
                        $(element).html(lines.slice(0, lineLimit - 1).join("\n") + "......");
                    }
                });
            },

            afterCreate: function (grid) {
                grid.jqGrid('navGrid', '#' + gridId + 'Pager', {add: false, edit: false, del: false, search: false})
                        .jqGrid('filterToolbar', {
                            stringResult: true,
                            searchOnEnter: false
                        });
                return grid;
            }

        });
        grid.getGridParam('afterCreate')(grid);

    });
</script>

<table class="followupGrid_container">
    <tr>
        <td valign="top" align="left" class="followupGrid_parent">
            <table id="followupGrid">
                <tr>
                    <td></td>
                </tr>
            </table>
            <div id="followupGridPager"></div>
        </td>
    </tr>
</table>